<template>
  <client-only>
    <div class="toolbar">

      <transition name="fade">
        <div class="item" v-if="isShowBackTop" @click="backTop()">
          <i class="iconfont icon-fanhuidingbu"></i>
        </div>
      </transition>

      <div class="item" @click="service()">
        <i class="iconfont icon-kefu"></i>
      </div>
      <div class="item" @click="$router.push({name:'simplepro'})">
        <i class="iconfont icon-liwu"></i>
      </div>
      <div class="item" @click="$router.push({name:'simplerpo-faq'})">
        <i class="iconfont icon-yiwen"></i>
      </div>


    </div>
  </client-only>
</template>

<script>
export default {
  name: "GlobalToolbar",
  data() {
    return {
      isShowBackTop: false
    }
  },
  methods: {
    backTop(){
      //平滑滚动
      this.scrollUp()
    },
    scrollUp(){

      //IE10+/Android Browser4.4+/
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame
        || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame
        || function(clb){
          return setTimeout(clb,1000/60);
        };

      var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame
        || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame
        || function(id){clearTimeout(id);};

      //document.getElementById("imagePreview").scrollIntoView();
      //document.body.scrollTop = "0px";

      var top = document.body.scrollTop || document.documentElement.scrollTop;

      //滚动时长
      var duration = 300; //300ms

      //计算步长
      var step =  top / (duration / ( 1000 / 60)) >> 0; //取整

      //window.console && console.log(requestAnimationFrame);

      function fn(){

        if(top >= 0){
          top -= step;
          document.documentElement.scrollTop = document.body.scrollTop = top;
          fn.rafTimer = requestAnimationFrame(fn);
        }else{
          document.body.scrollTop = 0;
          cancelAnimationFrame(fn.rafTimer);
        }
      }
      fn.rafTimer = requestAnimationFrame(fn);
    },
    service() {
      window.open('http://wpa.qq.com/msgrd?v=3&uin=599194993&site=qq&menu=yes');
    },
    getScrollTop() {
      var scroll_top = 0;
      if (document.documentElement && document.documentElement.scrollTop) {
        scroll_top = document.documentElement.scrollTop;
      } else if (document.body) {
        scroll_top = document.body.scrollTop;
      }
      return scroll_top;
    },
  },
  mounted() {
    let self = this;
    window.addEventListener('scroll', event => {
      let top = self.getScrollTop();
      self.isShowBackTop = top >= 50;
    });
  }
}
</script>
<style scoped lang="less">

@import "//at.alicdn.com/t/font_1762271_aldrq2mla9j.css";


.toolbar {
  position: fixed;
  right: 30px;
  bottom: 45px;

  .item {
    margin-bottom: 10px;
    display: flex;
    color: #000;
    background-color: var(--toolbar-bg);
    box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d;
    transition: color .3s;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .iconfont {
      font-size: 22px;
    }

    &:hover {
      color: #50a1ff;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
